import { Cascader, Form, Input, InputNumber, Modal } from 'antd';
import React from 'react';
// import RemoteSelect from '@/components/RemoteSelect';
// import {getSchemeList} from '@/pages/Finance/Scheme/RuleList/service';
import { nestedCityCode } from '@/components/CityCode/citycode';
import InputLnglat from '@/components/InputLnglat';
import type { ZoneCreationItem } from '@/pages/Zones/data';
import { TimePicker } from 'antd/es';

interface ZoneAddFormProps {
  onSubmit: (values: ZoneCreationItem) => void;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 20 },
    sm: { span: 20 },
  },
};

const AddZoneForm: React.FC<ZoneAddFormProps> = (props) => {
  const [form] = Form.useForm();

  const {
    onSubmit: handleAdd,
    onCancel: handleAddModalVisible,
    modalVisible: addModalVisible,
  } = props;

  const onModalOk = async () => {
    const fieldsValue = (await form.validateFields()) as ZoneCreationItem;
    console.log(fieldsValue);
    form.resetFields();
    handleAdd(fieldsValue);
  };

  return (
    <Modal
      title="添加停车区域信息"
      visible={addModalVisible}
      destroyOnClose
      onOk={() => onModalOk()}
      onCancel={() => handleAddModalVisible(false)}
      afterClose={() => handleAddModalVisible()}
      okText="确定"
      cancelText="取消"
    >
      <Form {...formItemLayout} form={form}>
        <Form.Item name="name" label="名称" rules={[{ required: true, message: '必选' }]}>
          <Input />
        </Form.Item>
        <Form.Item name="district" label="所在地区">
          <Cascader
            placeholder="选择所在地区"
            fieldNames={{ label: 'name', value: 'code', children: 'children' }}
            options={nestedCityCode}
          />
        </Form.Item>

        <Form.Item name="address" label="地址">
          <Input />
        </Form.Item>

        <Form.Item name="space_total_count" label="总泊位数量">
          <InputNumber min={0} defaultValue={0} />
        </Form.Item>

        <Form.Item name="open_time" label="运营时间" rules={[{ required: true, message: '必选' }]}>
          <TimePicker.RangePicker allowClear format={'HH:mm'} minuteStep={15} />
        </Form.Item>

        <Form.Item name="location" label="所在位置">
          <InputLnglat
            onChange={(values) => {
              form.setFieldsValue({ location: values });
            }}
          />
        </Form.Item>

        {/* <Form.Item name='scheme' label='停车计费规则' rules={[{required: true, message: '必选'}]}>
            <RemoteSelect
                style={{width: '100%'}}
                fieldNames={{key: 'id', value: 'id', label: 'name'}}
                request={async (name) => {
                  return await getSchemeList({type: 1, name});
                }}
            />
          </Form.Item> 

           <Form.Item name='reserve_scheme' label='预约收费规则' rules={[{required: true, message: '必选'}]}>
            <RemoteSelect
                style={{width: '100%'}}
                fieldNames={{key: 'id', value: 'id', label: 'name'}}
                request={async (name) => {
                  return await getSchemeList({type: 2, name});
                }}
            />
          </Form.Item> */}
      </Form>
    </Modal>
  );
};

export default AddZoneForm;
